<!--金牌顾问详情 -->
<template>
  <div style="position: relative; padding-bottom: 200px" v-loading="loading">
    <div v-show="!loading">

      <div class="minpian">
        <img class="minpian_img" :src="agentInfo.userInfo && agentInfo.userInfo.image
          ? agentInfo.userInfo.image
          : 'https://pic.bangbangtongcheng.com/static/my/header.png'
          " />
        <div class="minpian_center">
          <div class="minpian_center_one">
            <div style="display: flex; align-items: center">
              <div style="font-size: 32px; font-weight: 600">
                <!-- {{
                (agentInfo.userInfo && agentInfo.userInfo.nikeName) ||
                "未命名用户"
              }} -->

                {{ agentInfo.realName || agentInfo.userInfo.nikeName || "未命名用户" }}
              </div>
              <div class="jjr" v-if="agentInfo.userInfo && agentInfo.userInfo.isAgent == '1'">
                经纪人
              </div>
              <div class="jjr" v-else>个人车源</div>
            </div>

          </div>
          <div class="minpian_center_one">

            <div @click="companyDeilta(agentInfo)" v-if="agentInfo.userInfo && agentInfo.userInfo.storeId">
              <span>我的公司</span>
              <img style="width: 15px; height: 15px" src="../../../../assets/bbcz/tpxqy01.png" alt="" />
            </div>
          </div>
          <div class="minpian_center_one">
            <div style="display:flex;align-items: center;height:100%">
              <div class="vip-level pointer" v-if="agentInfo.userInfo"
                :style="{ backgroundColor: colors[agentInfo.userInfo.memberLevel - 1].bgColor, color: colors[agentInfo.userInfo.memberLevel - 1].wordColor, borderColor: colors[agentInfo.userInfo.memberLevel - 1].lineColor, }">
                {{ agentInfo.userInfo.memberLevelTitle }}</div>
            </div>
            <div class="wei" @click="weiguiClick(agentInfo.userInfo)">
              <span>违规次数</span>
              <img style="width: 15px; height: 15px" src="../../../../assets/bbcz/tpxqy01.png" alt="" />
              <span style="width: 18px;display: inline-block; color: red; font-weight: 600; font-size: 20px">{{
                agentInfo.violations || 0
              }}</span>
            </div>
          </div>
          <div class="contactWay">
            <div class="lxfs-item">

            </div>


          </div>
        </div>
      </div>
      <div style="width: 940px; margin: auto">
        <div class="bottom">
          <div class="titLiat">
            <div @click="titClick(index, item)" :class="xuanzhong == item.num ? 'li cur' : 'li'"
              v-for="(item, index) in list" :key="index">
              <p>{{ item.name }}</p>
              <img v-if="index == xuanzhong" src="../../../../assets/xuanzhong.png" />
            </div>
          </div>
        </div>
        <div class="list" v-if="xuanzhong != 3">
          <div class="li" v-for="(item, index) in houseList" :key="index">
            <img class="biao" @click="details(item)" :src="item.vehicleCoverPicture
              ? item.vehicleCoverPicture
              : $img + item.houseImageDiv
              " style="
              object-fit: contain;
              cursor: pointer;
              background-color: #00000033;
            " />
            <div class="name">
              <div class="t_1" @click="details(item)">
                {{ item.vehicleBrandModel ? (item.vehicleBrandModel.split('|')[0] || '') + ' '
                  + (item.vehicleBrandModel.split('|')[1] || '') : '' }} {{ item.model ? item.model + "/" : "" }}
                {{ item.bodyStructureDoors + "门" + item.bodyStructureSeat + "座" + item.bodyStructureVehicle + "车" }}
              </div>
              <div class="t_4">
                <img style="border-radius: 31px" :src="item.userInformation ? item.userInformation.image || 'https://pic.bangbangtongcheng.com/static/my/header.png' : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " />
                <span style="cursor: pointer">{{ item.userInformation ? item.userInformation.nikeName || "未命名用户" : "未命名用户"
                }}</span>
                <div @click.stop="shopdetails(item)" style="cursor: pointer;padding:0 6px;">
                  {{
                    item.distributor ? item.distributor.storeName : '个人车源'
                  }}
                </div>

              </div>
            </div>
            <div class="qian" v-if="item.transaction_type == 2">
              <p class="p1">{{ item.price }}万</p>
            </div>
          </div>
          <div v-if="houseList.length == 0">
            <el-empty :description="xuanzhong == 0 ? '还没有发布车' : xuanzhong == 1 ? '还没有发布新车' : '还没有发布二手车'"></el-empty>
          </div>
        </div>
        <div class="fenye" v-if="xuanzhong != 3">
          <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
      <div v-if="xuanzhong == 3">
        <!-- 帮友圈 -->
        <template v-for="s in ceshiArr">
          <friend-item :wrapWidth="940" :showCollect="false" :forbidClick="true" :item="s" types="3" @reData="getMoreData"
            :key="s.id"></friend-item>
        </template>
        <div v-if="ceshiArr.length == 0">
          <el-empty description="还没有发布帮友圈"></el-empty>
        </div>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
      <report ref="report" :bUserId="agentInfo.id"></report>

      <inform ref="inform" :bUserId="bUserId" :businessType='businessType'></inform>
    </div>

  </div>
</template>

<script>
import floor from "../../../../components/floor";
import heads from "../../../../components/head";
import report from "../../../../components/report.vue";
import chat from "../../../../components/chat.vue";
import tools from "../../../../components/tools.vue";
import inform from "../../../index/inform";
import friendItem from "../../../index/comp/bbcz-friend-circle-item.vue";
export default {
  props: {
    tid: {
      type: String | Number
    }
  },
  components: {
    floor,
    heads,
    report,
    chat,
    tools,
    inform,
    friendItem,
  },
  data() {
    return {
      collectTotal: '',
      businessType: '',
      isPhoneShow: false,
      bUserId: "",
      agentInfo: {},
      disa: false,
      phonestate: false,
      list: [
        { num: 0, name: "全部" },
        { num: 1, name: "到店新车" },
        { num: 2, name: "二手车" },
        { num: 3, name: "帮友圈" },
      ],
      xuanzhong: 0,
      housePage: {
        pageSize: 10,
        pageNo: 1,
        // userId:'',
      },
      houseList: [],
      housetotal: 0,
      loginstate: false,
      user: {},
      isCollection: 0,
      userInfo: {},
      ceshiArr: [],
      userId: "",
      loading: true,
      colors: [{
        bgColor: "#E9EFEF",
        wordColor: "#60807D",
        lineColor: "#B6C4C3",
        level: "青铜会员"
      },
      {
        bgColor: "#F7F7F7",
        wordColor: "#A3AAB0",
        lineColor: "#D2D9E0",
        level: "白银会员"
      },
      {
        bgColor: "#FFF8DE",
        wordColor: "#CEAB21",
        lineColor: "#D3CAB2",
        level: "黄金会员"
      },
      {
        bgColor: "#EDFAFF",
        wordColor: "#59B0E6",
        lineColor: "#BBD0DB",
        level: "铂金会员"
      },
      {
        bgColor: "#F2F5FF",
        wordColor: "#284EB6",
        lineColor: "#C1CBEF",
        level: "钻石会员"
      },
      {
        bgColor: "#FDF7FF",
        wordColor: "#A877C6",
        lineColor: "#DBC6E8",
        level: "钻石Ⅰ会员"
      },
      {
        bgColor: "#F8F2FF",
        wordColor: "#78439F",
        lineColor: "#958AC3",
        level: "钻石Ⅱ会员"
      },
      {
        bgColor: "#F4F2F2",
        wordColor: "#8D4581",
        lineColor: "#907B8C",
        level: "钻石Ⅲ会员"
      },
      {
        bgColor: "#F4F2F2",
        wordColor: "#502E30",
        lineColor: "#795D5E",
        level: "王者会员"
      },
      ],
    };
  },
  created() {
    this.id = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).id : '';

    this.getUser();

    this.init(this.id);
  },
  methods: {
    showPhone() {
      // agentInfo.userInfo.phone
      this.insertCallRecord({
        userId: this.agentInfo.userInfo.id,
        phone: this.agentInfo.userInfo.phone,
        businessType: this.agentInfo.userInfo.businessType,
        callType: 1
      })
    },
    goFriendDetails(item) {
      console.log("itemitemitemitem", item);
      this.openUrl({
        path: "/my/friendsCircleDetails",
        query: {
          id: item.id,
        },
      });
    },
    phoneGet() {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return false;
      }
      console.log("111");
      this.isPhoneShow = !this.isPhoneShow;
    },
    init(id) {

      // 在售车系/金牌顾问/帮友圈/现车销售
      // 全部/新车/二手车/帮友圈
      this.getUserInfoByUserId(id);

      if (this.loginstate) {

        // this.increaseBrowsingRecord();
      }

      // this.getHouseInfo()
    },
    increaseBrowsingRecord() {
      this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
        browseRecordId: this.id,
        viewersId: this.user.id,
        businessType: 2,
        browsingRecords: 1,
      }).then((res) => { });
    },
    getUserInfoByUserId(id) {
      this.$getHttp("/api/mobile/vehicleOwner/getSalesConsultantDetailsById", {
        userId: id,
        relationId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : "",
      }).then((res) => {
        if (res.code == 200) {
          this.agentInfo = res.salesConsultant;
          if (localStorage.getItem("userInfo")) {
            this.disa = res.salesConsultant.userInfo.id == JSON.parse(localStorage.getItem("userInfo")).id
          }
          this.loading = false
          // console.log(res.salesConsultant);

          if (res.salesConsultant.userInfo.isAgent != 1) {
            this.list = [
              { num: 2, name: "二手车" },
              { num: 3, name: "帮友圈" },
            ],
              this.xuanzhong = 2

          }
          this.getMoreData();


          // let userinfo = e.userInfo
          // if(userinfo.isAgent ==1 || userinfo.isShop == 1){
          // 	userinfo.scoreAvg = e.scoreAvg
          // }
          // userinfo.name = userinfo.nikeName
          // this.agentInfo = userinfo
        }
      });
    },
    // 关注
    // 关注
    collect2(item, flag) {
      console.log(item);
      if (this.loginstate) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: "1",
            relationId: item.userInfo.id,
            ids:
              this.agentInfo.collectionAttention &&
                this.agentInfo.collectionAttention.id
                ? this.agentInfo.collectionAttention.id
                : "",
          }
        ).then((data) => {
          if (data.code == 200) {
            this.getUserInfoByUserId(this.id, this.userId);
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000,
            });
            if (this.agentInfo.whetherCollection == '0') {
              this.addIntegral(5, "关注用户");
            }
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    getMoreData() {
      // 全部/到店新车/ 二手车/帮友圈
      if (this.xuanzhong == 0) {
        this.getPers(this.id, "");
      } else if (this.xuanzhong == 1) {
        this.getPers(this.id, 1);
      } else if (this.xuanzhong == 2) {
        this.getPers(this.id, 2);
      } else if (this.xuanzhong == 3) {
        this.getByq();
      }
    },
    getPers(userId, vehicleType) {
      this.$getHttp("/api/mobile/vehicleOwner/getVehicleInformation", {
        ...this.housePage,
        userId,
        vehicleType,
      }).then((res) => {
        if (res.code == 200) {
          this.houseList = res.vehicleInformation.pageList;
          this.housetotal = res.vehicleInformation.pageCount;
        }
      });
    },
    getByq() {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getHelpingFriendsCircleByPublisher",
        { ...this.housePage, publisherId: this.id, businessType: 2 }
      ).then((res) => {
        if (res.code == 200) {
          res.helpingFriendsCircleList.pageList.forEach((item) => {
            item.chage = 0;
            item.picture = this.manageImg(item.picture);
            item.imageList = this.manageImg(item.picture);
            item.video = this.manageImg(item.video);
          });
          this.ceshiArr = res.helpingFriendsCircleList.pageList;
          this.housetotal = res.helpingFriendsCircleList.pageCount;
          console.log("ceshiArrceshiArrceshiArr", this.ceshiArr);
        }
      });
    },
    getHouseInfo() {
      this.$getHttp("/mob/home/getHouseInfo", this.housePage).then((data) => {
        if (data.code == 200) {
          data.list.forEach((e) => {
            //判断该对象是否存在该属性
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          this.houseList = data.list;
          this.housetotal = data.count;
        }
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));

      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.userId = user.id;
        this.housePage.userId = user.id;
        // this.$getHttp("/mob/user/getIsCollection",{userId:user.id,cbType:3,type:1,relationId:this.tid}).then((data) =>{
        // 	if(data.code == 200){
        // 		this.isCollection = data.isCollection
        // 	}
        // })
        // this.$postHttp('/mob/user/saveUserCollection',{
        // 	userId:user.id,
        // 	type:2,
        // 	cbType:3,
        // 	relationId:this.tid,
        // }).then((data)=>{

        // })
      } else {
        this.housePage.userId = ''
        this.loginstate = false;
      }
    },
    rateChage(e) {
      if (this.loginstate) {
        this.disa = true;
        this.$postHttp("/mob/user/saveScoreInfo", {
          agentId: this.agentInfo.userId,
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          score: e,
          businessType: 2
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "评分成功！",
              type: "success",
              offset: 120,
              duration: 2000,
            });

            this.getUserInfoByUserId(this.id, this.userId);
          }
        });
      } else {
        this.$message({
          message: "请登录之后在进行评分",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },

    jubaoClick() {
      this.$refs.report.jubaoGuan();
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    details(item) {
      if (item.transaction_type == 1) {
        this.openUrl({
          path: "/index/leaseDetails",
          query: {
            id: item.id,
          },
        });
      } else {
        this.openUrl({
          path: "/index/newSourceDetails",
          query: {
            id: item.id,
          },
        });
      }
    },
    // 违规次数
    weiguiClick(item) {

      this.disa = true;
      this.bUserId = item.id;
      this.businessType = item.businessType
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);

    },
    // 他的公司
    companyDeilta(item) {
      if (item && item.storeId) {
        const routeLink = this.$router.resolve({
          path: "/index/newDealerDetails?id=" + item.storeId,
        });
        window.open(routeLink.href, "_self");
      } else {
        this.myErrorMessage('个人车源!')
      }

    },
    shopdetails(item) {
      if (item.distributor) {
        this.openUrl({
          path: '/index/newDealerDetails',
          query: {
            id: item.distributor.id,
          }
        })

      } else {
        this.$message({
          message: "个人车源！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    //开启聊天
    chat(item) {

      if (this.loginstate) {
        this.$refs.chats.chatOpne(item.userInfo.id);
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    phoneCheck() {
      if (this.loginstate) {
        this.phonestate = true;
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    currenthouse(e) {
      this.scrollToElement(document.querySelector(".bottom"))
      this.housePage.pageNo = e;
      this.getMoreData();
    },
    titClick(index, item) {
      this.housePage.pageNo = 1;
      this.xuanzhong = item.num;
      this.getMoreData();
      return;
      switch (index) {
        case 0:
          delete this.housePage.transactionType;
          delete this.housePage.newOld;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 1:
          this.housePage.transactionType = 2;
          this.housePage.newOld = 2;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 2:
          this.housePage.transactionType = 2;
          this.housePage.newOld = 1;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 3:
          this.friendsCircle();
          break;
      }
    },
    // 获取帮友圈数据
    friendsCircle() {
      let arr = [{ id: 1 }, { id: 2 }];
      arr.forEach((v) => {
        v.chage = 0;
      });
      this.ceshiArr = arr;
    },
    zhankaiClick(item) {
      this.ceshiArr.forEach((v) => {
        if (v.id == item.id) {
          if (v.chage == 0) {
            v.chage = 1;
          } else {
            v.chage = 0;
          }
        }
      });
    },
    //处理图片
    manageImg(imgs) {
      if (!imgs) return [];
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
    },
    // 关注
    collect(item, flag) {
      if (this.loginstate) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: "3",
            relationId: item.id,
            ids:
              item.collectionAttention && item.collectionAttention.id
                ? item.collectionAttention.id
                : "",
          }
        ).then((data) => {
          if (data.code == 200) {
            this.getMoreData();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000,
            });
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    goLike(item, flag) {
      if (this.loginstate) {
        // 去点赞
        var obj = {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          circleId: item.id,
        };
        item.likeRecord && item.likeRecord.id
          ? (obj.id = item.likeRecord.id)
          : "";
        this.$postHttp("/api/mobile/vehicleOwner/upperOrCancelThumb", {
          // id: item.id,
          ...obj,
        }).then((data) => {
          if (data.code == 200) {
            this.getMoreData();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000,
            });
          }
        });
      } else {
        this.$message({
          message: "请登录之后在点赞！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.minpian {
  display: flex;
  width: 940px;
  margin: auto;
  padding: 20px 0;

  .minpian_img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: contain;
    cursor: pointer;
    background-color: #00000033;
    margin-right: 24px;
  }

  .minpian_center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .minpian_center_one {
      cursor: pointer;
      display: flex;
      color: #333;
      justify-content: space-between;
      align-items: center;

      .jjr {
        width: 58px;
        height: 22px;
        border-radius: 14px;
        border: 1px solid #64b6a8;
        font-size: 12px;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        line-height: 22px;
        margin-left: 15px;
      }

      .wei {
        display: flex;
        align-items: center;
      }
    }

    .contactWay {
      display: flex;
      align-items: center;

      .lxfs-item {
        position: relative;
        color: #333333;

        .lxfs-item-phone {
          position: absolute;
          bottom: o;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      img {
        width: 33px;
        height: 33px;
      }
    }
  }
}

.helpFriends {
  width: 940px;
  margin: 0 auto;
  margin-top: 50px;

  .helpFriends_title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .helpFriends_title_left {
      display: flex;
      align-items: center;

      .helpFriends_title_left_img {
        border-radius: 50%;
        width: 112px;
        height: 112px;
      }

      .helpFriends_title_left_span {
        font-size: 36px;
        font-weight: 400;
        color: #333333;
        margin-left: 40px;
      }
    }

    .helpFriends_title_right {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
  }

  .helpFriends_article {
    margin-top: 34px;

    .helpFriends_article_text {
      font-size: 26px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
    }

    .helpFriends_article_active {
      font-size: 26px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .unfold {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 26px;
      font-weight: 400;
      color: #64b6a8;

      span {
        cursor: pointer;
      }

      .unfold_img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }

    .unfold_yc {
      display: none;
    }
  }

  .img_one {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_two {
    width: 100%;
    height: 290px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 48%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_three {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 30%;
      height: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }

  .video {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    video {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .byq_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    align-items: center;

    .byq_bottom_right {
      display: flex;
      align-items: center;

      .byq_bottom_right_item {
        display: flex;
        align-items: center;
        font-size: 26px;
        font-weight: 400;
        color: #333333;
        margin-right: 35px;

        .byq_bottom_right_item_img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }
    }
  }
}

.bottom {
  width: 940px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .titLiat {
    width: 940px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    margin-bottom: 15px;

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;
      transform-origin: left;

      p {
        font-size: 26px;
      }

      img {
        width: 32px;
        height: 16px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: -8px;
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          color: #333;
          font-size: 26px;
          cursor: pointer;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;
          white-space: nowrap;

          img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            width: 90px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;

        .p1 {
          //width: 120px;
          font-size: 32px;
          color: #e00000;
          text-align: center;
        }

        .p2 {
          //width: 120px;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.list {
  width: 940px;
  margin: auto;

  .li {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;

    .biao {
      width: 300px;
      height: 200px;
      object-fit: contain;
      cursor: pointer;
    }

    .name {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      width: 700px;

      .t_1 {
        color: #333;
        font-size: 26px;
        cursor: pointer;
      }

      .t_2 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_3 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_4 {
        position: absolute;
        font-size: 18px;
        color: #666666;
        bottom: 0;
        left: 0;
        white-space: nowrap;

        img {
          width: 31px;
          height: 31px;
        }

        div {
          display: inline-block;
          /* width: 90px; */
          height: 30px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          margin-left: 24px;
          color: #64b6a8;
        }
      }
    }

    .qian {
      position: absolute;
      top: 62px;
      right: 0;

      .p1 {
        //width: 120px;
        font-size: 32px;
        color: #e00000;
        text-align: center;
      }

      .p2 {
        //width: 120px;
        font-size: 18px;
        color: #333333;
        text-align: center;
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

/deep/.el-rate__icon {
  font-size: 30px;
}

.vip-level {
  width: 80px;

  text-align: center;
  padding: 4px 0;

  border: 1px solid #BD90D9;
  border-radius: 4px 4px 4px 4px;
  font-size: 15px;
  background: #F6F0FF;
  font-weight: 500;
  color: #BD90D9;
}
</style>
